<template>
    <!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" @touchmove.stop.prevent> -->
    <!-- {{ dataList.listIsShow }} -->
    <view class="loadBox">
        <slot></slot>

        <template v-if="datas.listIsShow">
            <u-loadmore :status="loadmoreList.status" :loading-text="loadmoreList.loadingText"
                :loadmore-text="loadmoreList.loadmoreText" :nomore-text="loadmoreList.nomoreText" />
        </template>
        <template v-else>

            <!-- 无项目的 -->
            <view class="noData2  flex-center auto bd-r40" v-if="datas.noDataType == 1">
                <view class="noData2_item pd-r40">
                    <view class="ft-28 c-99 text_center">你还没有购买项目~</view>
                    <view class="noData2_item_bottom ft-24 c-ff flex-center bd-r40 ft-lt2  mt-20"
                        @click="goPage('/pages/cart/cart')">去看项目
                        <image @click="goBack" class="icon_samll"
                            src="https://cdn.oss.bon-top.cn/static_bc/images/icon11.png"></image>
                    </view>
                </view>
            </view>
            <!-- 普通 -->
            <noData v-else="datas.noDataType < 1"></noData>
        </template>
    </view>
    <!-- </scroll-view> -->
</template>
<script setup lang="js">
import { ref, reactive, onMounted, defineProps, defineEmits, watch } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import noData from '@/components/noData.vue'

let prop = defineProps({ dataList: Object, pageInfo: Object, listIsShow: Boolean }
)
let { dataList } = prop
let emit = defineEmits(['getDatas'])
let loadmoreList = reactive({
    status: "loadmore",
    loadingText: "加载中~",
    loadmoreText: "加载更多",
    nomoreText: "没有更多了",
})
let datas = ref({})

watch(() => prop.dataList, (newValue, oldValue) => {
    console.log('myProp changed from', oldValue, 'to', newValue);
    dataList = newValue
    datas.value = newValue
    // 在这里做其他操作，比如更新状态、调用方法等
}, { immediate: true, deep: true })

const goPage = (url) => {
    uni.navigateTo({ url: url })
}
onMounted(() => {
    let key = ''
    if (Object.keys(prop.pageInfo).includes('currentPage')) {
        key = 'currentPage'
    } else {
        key = 'page'

    }
    if (prop.pageInfo[key] >= prop.dataList.pageInfo?.totalPage) loadmoreList.status = 'nomore'
    console.log('loadmoreList.status', loadmoreList.status)
    console.log('=====>', prop.dataList)

})
// 触底加载数据
onReachBottom(() => {
    // 处理滚动加载
    // 处理当前已经是最后一页
    console.log('哈佛话费++++++++', prop.dataList, prop.pageInfo)
    let key = ''
    if (Object.keys(prop.pageInfo).includes('currentPage')) {
        key = 'currentPage'
    } else {
        key = 'page'

    }
    if (prop.pageInfo[key] >= prop.dataList.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'
        console.log("我没了")
    } else {
        loadmoreList.status = 'loading'
        prop.pageInfo[key]++
        setTimeout(() => {
            emit('getDatas')
            loadmoreList.status = 'loadmore'

        }, 500)
    }

})
// 处理页面不能触发onReachBottom事件
const changeBottom = () => {
    console.log('哈佛话费++++++++ 单独的', prop.dataList, prop.pageInfo)
    if (prop.pageInfo.currentPage >= prop.dataList.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'
        console.log("我没了")
    } else {
        loadmoreList.status = 'loading'
        prop.pageInfo.currentPage++
        setTimeout(() => {
            emit('getDatas')
            loadmoreList.status = 'loadmore'

        }, 500)
    }
}
defineExpose({ changeBottom })
</script>
<style lang="scss" scoped>
.noData2 {
    width: 690rpx;
    height: 234rpx;
    background: #F8F8F8;

    &_item {
        background-color: #F8F8F8;

        &_bottom {
            background-color: #333;
            width: 170rpx;
            height: 54rpx;
        }
    }
}
</style>